<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('app.name', 'Laravel') }}</title>

    <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
<nav class="navbar navbar-default navbar-static-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <!-- Collapsed Hamburger -->
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#app-navbar-collapse" aria-expanded="false">
                <span class="sr-only">Toggle Navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>

            <!-- Branding Image -->
            <a class="navbar-brand" href="{{ url('/') }}">
                {{ config('app.name', 'Laravel') }}
            </a>
        </div>

        <div class="collapse navbar-collapse" id="app-navbar-collapse">
            <!-- Left Side Of Navbar -->
            <ul class="nav navbar-nav">
                &nbsp;
            </ul>

            <!-- Right Side Of Navbar -->
            <ul class="nav navbar-nav navbar-right">
                <!-- Authentication Links -->
                @guest
                    <li><a href="{{ route('login') }}">登录</a></li>
                    {{--<li><a href="{{ route('register') }}">Register</a></li>--}}
                @else
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                           aria-expanded="false" aria-haspopup="true" v-pre>
                            {{ Auth::user()->name }} <span class="caret"></span>
                        </a>

                        <ul class="dropdown-menu">
                            <li>
                                <a href="{{ route('logout') }}"
                                   onclick="event.preventDefault();
                                                     document.getElementById('logout-form').submit();">
                                    退出登录
                                </a>

                                <form id="logout-form" action="{{ route('logout') }}" method="POST"
                                      style="display: none;">
                                    {{ csrf_field() }}
                                </form>
                            </li>
                        </ul>
                    </li>
                @endguest
            </ul>
        </div>
    </div>
</nav>

<div class="container-fluid">
    <div class="row">
        @auth
        <div class="col-sm-3 col-md-2 sidebar" id="sidebar" v-cloak>
            <el-menu
                    :default-active="currentMenu"
                    class="el-menu-vertical-demo"
                    @open="handleOpen"
                    @select="handleSelect"
                    @close="handleClose">
                <el-menu-item index="/">
                    <i class="el-icon-menu"></i>
                    <span slot="title">首 页</span>
                </el-menu-item>
                <el-submenu index="1">
                    <template slot="title">
                        <i class="el-icon-location"></i>
                        <span>用户管理</span>
                    </template>
                    <el-menu-item index="user">用户列表</el-menu-item>
                    <el-menu-item index="role">角色列表</el-menu-item>
                    <el-menu-item index="permission">权限列表</el-menu-item>
                </el-submenu>
                <el-submenu index="2">
                    <template slot="title">
                        <i class="el-icon-upload"></i>
                        <span>其他</span>
                    </template>
                    <el-menu-item index="dbBackup">数据备份与还原</el-menu-item>
                    <el-menu-item index="role">缓存管理</el-menu-item>
                </el-submenu>
                <el-menu-item index="4">
                    <i class="el-icon-setting"></i>
                    <span slot="title">导航四</span>
                </el-menu-item>
            </el-menu>
        </div>
        <div class="col-sm-9 col-md-10  main" id="app" v-cloak>
            @yield('content')
        </div>
        @else
            <div id="sidebar"></div>
            <div class="col-md-12  main" id="app">
                @yield('content')
            </div>
        @endauth
    </div>
</div>

<!-- Scripts -->
<script src="{{ asset('js/app.js') }}"></script>
<script>
    const path = "{{app('request')->path()}}";
    new Vue({
        el: '#sidebar',
        mounted () {
            console.log('sidebar mounted',path);
            this.currentMenu = path;
        },
        data () {
            return {
                currentMenu : '/'
            }
        },
        methods: {
            handleOpen: function () {
                console.log('handleOpen')
            },
            handleClose () {
                console.log('handle close')
            },
            handleSelect (index,indexPath) {
                console.log('handleSelect',index,indexPath);
                window.location.href = index
            }
        }
    })
</script>
@yield('js')
</body>
</html>
